<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>
			/*1+100 取值：选择器选中几率增加*/
			di v#d1{
				width:50%;
				height:500px;
				/*颜色色值：透明度：遮罩层、左栏*/
				background:rgba(243,35,134,.5)
			}
			/*最大宽度与最小宽度*/
			div#container{
				background:#f0f0f0 ;
			}
			.box{
				background:#0003ee;
				color:#fff;
				width: 80%;
				/*最小宽度：设定，不能改变，移动端*/
				min-width: 500px;
				/*最大宽度：设定,宽度最大上限600px,移动端*/
				max-width: 650px;
				/*页面设定最大与最小宽高，约定 移动端宽高比，页面错乱*/
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<!--最大宽度和最小宽度
		自适应：编写页面在任何浏览器下正常显示-->
		<div id="continer">
			<div class="box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor, doloribus. Voluptas voluptate qui iure natus deleniti? Nam, non. Blanditiis eaque illo possimus odit impedit animi provident praesentium quae consequatur voluptate.
				</div>
	</body>
</html>